<!-- 自定义表格 -->
<template>
    <div class="">
        <el-button
            v-waves
            size="mini"
            class="filter-item"
            style="margin: 10px 10px 10px 0px"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
        >添加行</el-button>
        <el-table
            v-loading="listLoading"
            :data.sync="rowContent"
            element-loading-text="Loading"
            fit
            border
            stripe
            size="mini"
            highlight-current-row
            ref="multipletable"
            @selection-change="handleChange"
        >
            <el-table-column width="55" type="index"></el-table-column>
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 固定列生成 -->
            <el-table-column
                v-for="(item,i) in fixedTitle"
                :key="i"
                align="center"
                width="130"
                :label="item.title"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.temp_edit">
                        <el-input
                            v-if="item.rowType===1"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-input-number
                            v-else-if="item.rowType===2"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-date-picker
                            type="date"
                            value-format="timestamp"
                            v-else-if="item.rowType===3"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-select
                            v-else-if="item.rowType===4"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        >
                            <el-option
                                v-for="(itemChild,index) in item.domains"
                                :key="index"
                                :label="itemChild"
                                :value="index"
                            ></el-option>
                        </el-select>
                    </template>
                    <span v-else-if="item.rowType===3">
                        <i class="el-icon-time"></i>
                        {{ parseInt(scope.row[item.field]) |timestampToDate('yyyy-MM-dd')}}
                    </span>
                    <span v-else-if="item.rowType===4">{{ item.domains[scope.row[item.field]] }}</span>

                    <span v-else>{{scope.row[item.field]}}</span>
                </template>
            </el-table-column>
            <!-- 动态列生成 -->
            <el-table-column
                v-for="(item,i) in dynTitle"
                :key="i"
                align="center"
                width="130"
                :label="item.title"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.temp_edit">
                        <el-input
                            v-if="item.rowType===1"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-input-number
                            v-else-if="item.rowType===2"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-date-picker
                            type="date"
                            value-format="timestamp"
                            v-else-if="item.rowType===3"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        />
                        <el-select
                            v-else-if="item.rowType===4"
                            v-model="scope.row[item.field]"
                            class="edit-input"
                            size="small"
                        >
                            <el-option
                                v-for="(itemChild,index) in item.domains"
                                :key="index"
                                :label="itemChild"
                                :value="index"
                            ></el-option>
                        </el-select>
                    </template>
                    <span v-else-if="item.rowType===3">
                        <i class="el-icon-time"></i>
                        {{ parseInt(scope.row[item.field]) |timestampToDate('yyyy-MM-dd')}}
                    </span>
                    <span v-else-if="item.rowType===4">{{ item.domains[scope.row[item.field]] }}</span>
                    <span v-else>{{scope.row[item.field]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="230"
                align="center"
                fixed="right"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.temp_edit">
                        <el-button
                            size="mini"
                            type="success"
                            icon="el-icon-circle-check-outline"
                            @click="saveRowEvent(scope.row)"
                        >保存</el-button>
                        <el-button
                            size="mini"
                            type="warning"
                            icon="el-icon-refresh"
                            @click="cancelRowEvent(scope.$index,scope.row)"
                        >取消</el-button>
                    </template>
                    <template v-else>
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            @click="scope.row.temp_edit=!scope.row.temp_edit"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="removeRowEvent(scope.row)"
                        >删除</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="12" class="btn-del">
                <el-button
                    v-waves
                    v-show="total>0"
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="delSelectionRow"
                >多行删除</el-button>
            </el-col>
            <!-- 分页 -->
            <el-col :span="12">
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.limit"
                    @pagination="fetchData"
                />
            </el-col>
        </el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Pagination from "@/components/Pagination";
import waves from "@/directive/waves"; //水波样式
import { MessageBox, Message } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "CustomTable",
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    //行数据
    rowContent: Array,
    //固定列头
    fixedTitle: Array,
    //动态列头
    dynTitle: Array,
    //页数
    total: {
      type: Number,
      default: 0
    }
  },
  filters: {},
  components: { Pagination },
  data() {
    //这里存放数据
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      rowGuid: [],
      selectionGuids: [],
      selectionRoomData: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  directives: { waves }, //水波样式
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取表格数据
    fetchData() {
      this.$emit("fetchData", this.listQuery);
    },
    //表格select事件
    handleChange(val) {
      console.log("change", val);
      let guid = [];
      if (val.length > 0) {
        this.selectionData = val;
        this.assetData = val;
        for (let index = 0; index < this.selectionData.length; index++) {
          guid.push(this.selectionData[index].guid);
        }
        this.selectionGuids = guid;
        this.selectionRoomData = val;
      }
    },
    //添加行事件
    handleCreate() {
      //往数组添加一个空对象
      // this.rowContent.push({ edit: true, addButton: true });
      this.rowContent.unshift({ temp_edit: true, temp_addButton: true });
    },
    //多行删除
    delSelectionRow() {
      this.$emit("delSelectionData", this.selectionGuids);
    },
    //保存修改
    saveRowEvent(row) {
      if (row.temp_addButton) {
        //添加行
        this.$emit("insertRowData", row);
      } else {
        //修改行
        this.$emit("updateRowData", row);
        // row.temp_edit = !temp_edit;
      }
    },
    cancelRowEvent(index, row) {
      if (row.temp_addButton) {
        this.rowContent.splice(index, 1);
      } else {
        row.temp_edit = false;
      }
    },
    removeRowEvent(row) {
      this.$emit("delRowData", row);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.btn-del {
  margin-top: 18px;
}
</style>